<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Description" content="">
    <title>Document</title>
    <!-- -->
    <script src="bootstrap-3.4.1/js/jquery.min.js"></script>
   
    <link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">  
	<script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>

    <script src="vue.js"></script>

    <style>

    .state{
        text-align: center;
        margin: 5px;
        padding: 5px;
    }
    .setItem{
        margin: 5px;
        padding: 5px;
    }
    .setItem .lb{
        width: 50px;
        display: inline-block;
    }
    [v-cloak]{
           display: none;
       }
    </style>
</head>
<body>


<div class="container" id="app" v-cloak>
    <div style="text-align: center;">
        <span style="display:inline-block;padding: 5px;margin: 5px; font-weight: bold; font-size: 18px;">远程开机</span>
    </div>
    
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title" style="text-align: center;">
                <span v-if="deviceState == 0" style="color: #F00;" >
                    无效设备码
                </span>
                <span v-else-if="deviceState == 1" style="color:#449d44;" >
                    在线
                </span>
                <span v-else style="color:#f0ad4e">
                    离线
                </span>
                
            </h3>
        </div>
        <div class="panel-body">
            <div style="text-align: center;">
                <button type="button" class="btn btn-success" v-on:click="start('sigle')">
                    <span class="glyphicon glyphicon-off"></span>
                    开机
                </button>
                <button type="button" class="btn btn-success" v-on:click="start('scan')" >
                    <span class="glyphicon glyphicon-refresh"></span>
                    扫描
                </button>
            </div>
            
        </div>
    </div>
   

    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">配置</h3>
        </div>
        <div class="panel-body">

                <div class="setItem" >
                    <label class="lb">授权码:</label>
                    <input v-model="data.deviceId" placeholder="请输入设备授权码">
                </div>
                <div class="setItem" >
                    <label class="lb">wifi:</label>
                    <input v-model="data.wifi" placeholder="请输入wifi账号">
                </div>
                <div class="setItem">
                    <label class="lb">密码:</label>
                    <input v-model="data.password" placeholder="请输入wifif密码" >
                </div>
                <div class="setItem">
                    <label class="lb">ip:</label>
                    <input v-model="data.ip" placeholder="请输入开机电脑的ip" >
                </div>
                <div class="setItem">
                    <label class="lb">mac:</label>
                    <input v-model="data.mac" placeholder="请输入开机电脑MAC地址" >
                </div>
                <div class="setItem">
                    <label class="lb">port:</label>
                    <input v-model="data.port" placeholder="请输入开机端口默认为7">
                </div>
                <div style="text-align: center;">
                    <button type="button" v-on:click="save" class="btn btn-success" >配置</button>
                </div>
                
        
        </div>
    </div>



    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">广播配置</h3>
        </div>
        <div class="panel-body">
            <div class="setItem" >
                <label class="lb">ip:</label>
                <input v-model="server.ip">
            </div>

            <div class="setItem" >
                <label class="lb">port:</label>
                <input v-model="server.port">
            </div>
        </div>
    </div>
   


</div>


<script>

function httpGet(url,success,error){
    $.ajax({
        headers:{
            'api-key':window.http.getKey()
        },
        timeout:1000,
        type:'get',
        url:url,
        success:success,
        error:error
    });
}


function httpPost(url,param,success,error){
    $.ajax({
        headers:{
            'api-key':window.http.getKey()
        },
        timeout:1000,
        type:'post',
        data:param,
        async:true,
        url:url,
        success:success,
        error:error,
    });
}





function stringToByte(str) {
    var len, c;
    len = str.length;
    var bytes = [];
    for(var i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        bytes.push(c);
    }
    return bytes;
}


var app = new Vue({
  el: '#app',
  data: {
    state:false,
    deviceState:2, //设备状态，0无效授权码，1在线，2离线
    server:{
        ip:'255.255.255.255',
        port:'8888'
    },
    data:{
        deviceId:'',
        wifi:'',
        password:'',
        ip:'',
        port:'7',
        mac:''
    }
  },
  created:function(){
      var that=this;
      this.initData();
      if(that.data.deviceId!=undefined&&""!=that.data.deviceId){
         that.getDevInfo();
      }else{
         that.deviceState=0;
      }
      setInterval(function(){
          if(that.data.deviceId!=undefined&&""!=that.data.deviceId){
            that.getDevInfo();
          }else{
              that.deviceState=0;
          }
        
      },5000);
      
  },

 
  methods:{
      //加载配置信息
      initData:function(){
          var serverStr=localStorage.getItem("server");
          if(serverStr!=undefined&&""!=serverStr){
            var ss=JSON.parse(serverStr);
            if(ss.ip){
                this.server.ip=ss.ip;
            }
            if(ss.port){
                this.server.port=ss.port;
            }
            
          }
          
          var dataStr=localStorage.getItem("data");
          if(dataStr!=undefined&&""!=dataStr){
            var ss=JSON.parse(dataStr);
            this.data.deviceId=ss.deviceId;
            this.data.wifi=ss.wifi;
            this.data.password=ss.password;
            this.data.ip=ss.ip;
            if(ss.port!=undefined&&""!=ss.port){
                this.data.port=ss.port;
            }
            this.data.mac=ss.mac;
          }
      },

      getDevInfo:function(){
        var that=this;
        var data=httpGet("http://api.heclouds.com/devices/"+this.data.deviceId,function(data){
            console.log("json:"+JSON.stringify(data));
            if(data){
                if(data.errno==0){
                    var state=data.data.online;
                    if(state){
                        that.deviceState=1;
                    }else{
                        that.deviceState=2;
                    }
                }else{
                    that.deviceState=0;
                }
            }
            
        },function(){});
        
      },
      start:function(type){
          var json={};
          json.ip=this.data.ip;
          json.mac=this.data.mac;
          json.port=this.data.port;
          json.type=type;
          var json=httpPost("http://api.heclouds.com/cmds?device_id="+this.data.deviceId,JSON.stringify(json),function(data){
              console.log("hhhh:"+JSON.stringify(data));
          },function(){});
          window.toast.toast("发送成功");
      },
      save:function(){
          //点击配置时候会将本次的数据保存
          var serverConfig=JSON.stringify(this.server);
          localStorage.setItem("server",serverConfig)
          var json=JSON.stringify(this.data);
          localStorage.setItem("data",json)
          var blob = stringToByte(json);
          var udpClient=window.udp.clientUdp();
          var ip=this.server.ip;
          var port=parseInt(this.server.port);
          console.log(ip);
          console.log(port);
          udpClient.sendTo(ip,port,blob);
          udpClient.close();
          window.toast.toast("发送成功");
      }
  }
});

</script>
</body>
</html>
